<template>
  <div class="co-date-range-picker">
    <!-- <el-row v-if="type === 'datetime'">
      <el-col :span="11">
        <el-date-picker
          v-model="startTime"
          :disabled="disabled"
          :picker-options="{disabledDate:(time)=>pickerOptionsStart(time,endTime)}"
          style="width: 100%"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="10:00:00"
          placeholder="选择日期"
          @change="startChange"
        />
      </el-col>
      <el-col :span="2" style="text-align: center;">—</el-col>
      <el-col :span="11">
        <el-date-picker
          v-model="endTime"
          :disabled="disabled"
          :picker-options="{disabledDate:(time)=>pickerOptionsEnd(time,startTime)}"
          style="width: 100%"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="18:00:00"
          placeholder="选择日期"
          @change="endChange"
        />
      </el-col>
    </el-row>
    <el-row v-if="type === 'date'" >
      <el-date-picker
        v-model="value"
        :disabled="disabled"
        :picker-options="pickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        class="co-daterange"
        style="width: 100%;line-height: 28px"
        range-separator="—"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="change"
      />
    </el-row> -->
  </div>
</template>

<script>
import moment from 'dayjs'
let dateType = '0'
import weekday from 'dayjs/plugin/weekday.js'
import localeData from 'dayjs/plugin/localeData.js'
import weekOfYear from 'dayjs/plugin/weekOfYear.js'
moment.extend(localeData)
moment.extend(weekday)
moment.extend(weekOfYear)
export default {
  name: 'HmDateRangePicker',
  props: {
    startTime: {
      type: [String, Number],
      default: ''
    },
    endTime: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'date'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 扩展disabledDate
    disabledDate: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      value: ['', ''],
      hasValue: [
        moment()
          .add(-1, 'day')
          .format('YYYY-MM-DD'),
        moment()
          .add(-1, 'day')
          .format('YYYY-MM-DD')
      ],
      pickerOptionsEnd: (time, startTime) => {
        if (startTime) {
          return (
            time.getTime() <=
            new Date(startTime).getTime() - 1000 * 60 * 60 * 24
          )
        }
      },
      pickerOptionsStart: (time, endTime) => {
        if (endTime) {
          return time.getTime() >= new Date(endTime).getTime()
        }
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              picker.$emit('pick', [start, end])
              dateType = '1'
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              let yesterday = moment()
                .subtract(1, 'days')
                .format('YYYY-MM-DD')
              let time1 = yesterday + ' ' + '00:00:00'
              let time2 = yesterday + ' ' + '23:59:59'
              const end = new Date(time1)
              const start = new Date(time2)
              picker.$emit('pick', [start, end])
              dateType = '2'
            }
          },
          {
            text: '本周',
            onClick(picker) {
              let weeks = moment().week()
              const end = new Date(
                moment()
                  .week(weeks)
                  .weekday(1)
                  .add(6, 'day')
                  .format('YYYY-MM-DD')
              )
              const start = new Date(
                moment()
                  .week(weeks)
                  .weekday(1)
                  .format('YYYY-MM-DD')
              )
              picker.$emit('pick', [start, end])
              dateType = '3'
            }
          },
          {
            text: '上周',
            onClick(picker) {
              let weeks = moment().week()
              const end = new Date(
                moment()
                  .week(weeks - 1)
                  .weekday(1)
                  .add(6, 'day')
                  .format('YYYY-MM-DD')
              )
              const start = new Date(
                moment()
                  .week(weeks - 1)
                  .weekday(1)
                  .format('YYYY-MM-DD')
              )
              picker.$emit('pick', [start, end])
              dateType = '4'
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
              dateType = '5'
            }
          },
          {
            text: '本月',
            onClick(picker) {
              // 本月
              let start = new Date(
                moment()
                  .startOf('month')
                  .format('YYYY-MM-DD')
              )
              let end = new Date(
                moment()
                  .endOf('month')
                  .format('YYYY-MM-DD HH:mm:ss')
              ) // 现在
              picker.$emit('pick', [start, end])
              dateType = '6'
            }
          },
          {
            text: '上月',
            onClick(picker) {
              // 上月
              const startDate = moment()
                .month(moment().month() - 1)
                .startOf('month')
                .format('YYYY-MM-DD HH:mm:ss')
              const endDate = moment()
                .month(moment().month() - 1)
                .endOf('month')
                .format('YYYY-MM-DD HH:mm:ss')
              let start = new Date(startDate)
              let end = new Date(endDate) // 现在
              picker.$emit('pick', [start, end])
              dateType = '7'
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
              dateType = '8'
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
              dateType = '9'
            }
          }
        ]
      }
    }
  },
  watch: {
    startTime: {
      handler(newData, oldData) {
        if (newData !== oldData && !newData) {
          this.value = ['', '']
        } else {
          this.value.splice(0, 1, new Date(newData))
        }
      },
      immediate: true
      // deep: true
    },
    endTime: {
      handler(newData, oldData) {
        if (newData !== oldData && !newData) {
          this.value = ['', '']
        } else {
          this.value.splice(1, 1, new Date(newData))
        }
      },
      immediate: true
      // deep: true
    },
    disabledDate: {
      handler(newData, oldData) {
        if (newData) {
          this.pickerOptionsEnd = (time, startTime) => {
            if (startTime) {
              return (
                time.getTime() <=
                new Date(startTime).getTime() - 1000 * 60 * 60 * 24
              ) || newData(time)
            } else return newData(time)
          }
          this.pickerOptionsStart = (time, endTime) => {
            if (endTime) {
              return (time.getTime() >= new Date(endTime).getTime()) || newData(time)
            } else return newData(time)
          }
          this.pickerOptions = { disabledDate: newData, ...this.pickerOptions }
        }
      },
      immediate: true
      // deep: true
    }
  },
  methods: {
    change(val) {
      if (val && val.length) {
        this.$emit('select', {
          start: this.dateFormater(val[0], 'YYYY-MM-DD'),
          end: this.dateFormater(val[1], 'YYYY-MM-DD'),
          dateType: dateType
        })
        this.startChange(this.dateFormater(val[0], 'YYYY-MM-DD'))
        this.endChange(this.dateFormater(val[1], 'YYYY-MM-DD'))
      } else {
        this.startChange(null)
        this.endChange(null)
      }
    },
    startChange(val) {
      dateType = ''
      this.$emit('changeStart', val)
    },
    endChange(val) {
      dateType = ''
      this.$emit('changeEnd', val)
    }
  }
}
</script>